<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="../jqtool/jquery.tools.min.js">
        </script>
		<style type="text/css">
            body {
                padding: 50px 80px;
                font-family: "Lucida Grande", "bitstream vera sans", "trebuchet ms", sans-serif, verdana;
            }
            
            /* get rid of those system borders being generated for A tags */
            a:active {
                outline: none;
            }
            
            a:focus {
                -moz-outline-style: none;
            }			
		</style>
        <style type="text/css">
#mytable {
    width: 650px;
    padding: 0;
    margin: 0;
    border-collapse:separate;
}

#mytable {
    font-size:11px !important;
}

caption {
    padding: 0 0 5px 0;
    width: 650px;
    text-align: right;
    color: #4f6b72;
    font-size:16px;
}

th {
    color: #4f6b72;
    border-right: 1px solid #C1DAD7;
    border-bottom: 1px solid #C1DAD7;
    border-top: 1px solid #C1DAD7;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: left;
    padding: 6px 6px 6px 12px;
    background: #CAE8EA url(/media/img/tooltip-table-demo/bg_header.jpg) no-repeat;
    font-weight:bold;
}

th.nobg {
    border-top: 0;
    border-left: 0;
    border-right: 1px solid #C1DAD7;
    background: none;
}

td {
    border-right: 1px solid #C1DAD7;
    border-bottom: 1px solid #C1DAD7;
    background: #fff;
    padding: 6px 6px 6px 12px;
    color: #4f6b72;
}

td img {
    cursor:pointer;
}

th.spec {
    border-left: 1px solid #C1DAD7;
    border-top: 0;
    background: #fff url(/media/img/tooltip-table-demo/bullet1.gif) no-repeat;
    font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}           
        </style>
		<style type="text/css">

/* simple css-based tooltip */
.tooltip {
    background-color:#000;
    border:1px solid #fff;
    padding:10px 15px;
    width:200px;
    display:none;
    color:#fff;
    text-align:left;
    font-size:12px;

    /* outline radius for mozilla/firefox only */
    -moz-box-shadow:0 0 10px #000;
    -webkit-box-shadow:0 0 10px #000;
}
			
		</style>
		<style type="text/css">
 #tooltip {
  width:100px;
  background-color:#3d7483;
  padding:5px;
  font-size:11px;
  }			
		</style>
        <script type="text/javascript">

        </script>
    </head>
    <body>
  <!-- tab panes -->
<!-- use the same tooltip for each entry. Also the content. -->
<div id="tooltip" class="tooltip">
  Remove this row.
</div>

<table id="mytable" cellspacing="0"
       summary="Historic information about Olympic medalists that competed in the 20 Km Walk since 1956">

  <caption>Olympic Medalists: 20 Km Walk</caption>
  <tr>
    <th class="nobg">Games</th>
    <th>Gold</th>
    <th>Silver</th>
    <th>Bronze</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <th class="spec">1956 Melbourne</th>
    <td>Leonid Spirin (URS)</td>
    <td>Antanas Mikenas (URS)</td>
    <td>Bruno Junk (URS)</td>
    <td><img src="./img/tooltip-table-demo/delete.png" /></td>
  </tr>
  <tr>
    <th class="spec">1960 Rome</th>
    <td>Volodymyr Holubnychy (URS)</td>
    <td>Noel Freeman (AUS)</td>
    <td>Stanley Vickers (GBR)</td>
    <td><img src="./img/tooltip-table-demo/delete.png" /></td>
  </tr>
  <tr>
    <th class="spec">1964 Tokyo</th>
    <td>Kenneth Matthews (GBR)</td>
    <td>Dieter Lindner (EUA)</td>
    <td>Volodymyr Holubnychy (URS)</td>
    <td><img src="./img/tooltip-table-demo/delete.png" /></td>
  </tr>
  <tr>
    <th class="spec">1968 Mexico City</th>
    <td>Volodymyr Holubnychy (URS)</td>
    <td>Jos&eacute; Pedraza (MEX)</td>
    <td>Nikolay Smaga (URS)</td>
    <td><img src="./img/tooltip-table-demo/delete.png" /></td>
  </tr>
  <tr>
    <th class="spec">1972 Munich</th>
    <td>Peter Frenkel (GDR)</td>
    <td>Volodymyr Holubnychy (URS)</td>
    <td>Hans-Georg Reimann (GDR)</td>
    <td><img src="./img/tooltip-table-demo/delete.png" /></td>
  </tr>
  <tr>
    <th class="spec">1976 Montreal</th>
    <td>Daniel Bautista (MEX)</td>
    <td>Hans-Georg Reimann (GDR)</td>
    <td>Peter Frenkel (GDR)</td>
    <td><img src="./img/tooltip-table-demo/delete.png" /></td>
  </tr>
  <tr>
    <th class="spec">1980 Moscow</th>
    <td>Maurizio Damilano (ITA)</td>
    <td>Pyotr Pochenchuk (URS)</td>
    <td>Roland Wieser (GDR)</td>
    <td><img src="./img/tooltip-table-demo/delete.png" /></td>
  </tr>
  <tr>
    <th class="spec">1984 Los Angeles</th>
    <td>Ernesto Canto (MEX)</td>
    <td>Ra&uacute;l Gonz&aacute;lez (MEX)</td>
    <td>Maurizio Damilano (ITA)</td>
    <td><img src="./img/tooltip-table-demo/delete.png" /></td>
  </tr>
  <tr>
    <th class="spec">1988 Seoul</th>
    <td>Jozef Pribilinec (TCH)</td>
    <td>Ronald Weigel (GDR)</td>
    <td>Maurizio Damilano (ITA)</td>
    <td><img src="./img/tooltip-table-demo/delete.png" /></td>
  </tr>
  <tr>
    <th class="spec">1992 Barcelona</th>
    <td>Daniel Plaza (ESP)</td>
    <td>Guillaume LeBlanc (CAN)</td>
    <td>Giovanni De Benedictis (ITA)</td>
    <td><img src="./img/tooltip-table-demo/delete.png" /></td>
  </tr>
  <tr>
    <th class="spec">1996 Atlanta</th>
    <td>Jefferson P&eacute;rez (ECU)</td>
    <td>Ilya Markov (RUS)</td>
    <td>Bernardo Segura (MEX)</td>
    <td><img src="./img/tooltip-table-demo/delete.png" /></td>
  </tr>
  <tr>
    <th class="spec">2000 Sydney</th>
    <td>Robert Korzeniowski (POL)</td>
    <td>Noe Hern&aacute;ndez (MEX)</td>
    <td>Vladimir Andreyev (RUS)</td>
    <td><img src="./img/tooltip-table-demo/delete.png" /></td>
  </tr>
  <tr>
    <th class="spec">2004 Athens</th>
    <td>Ivano Brugnetti (ITA)</td>
    <td>Francisco Javier Fern&aacute;ndez (ESP)</td>
    <td>Nathan Deakes (AUS)</td>
    <td><img src="./img/tooltip-table-demo/delete.png" /></td>
  </tr>
  <tr>
    <th class="spec">2008 Beijing</th>
    <td>Valeriy Borchin (RUS)</td>
    <td>Jefferson Perez (ECU)</td>
    <td>Jared Tallent (AUS)</td>
    <td><img src="./img/tooltip-table-demo/delete.png" /></td>
  </tr>
</table>
        <script type="text/javascript">
// execute your scripts when the DOM is ready. this is a good habit
$(function() {
        // setup tooltip for a single DIV element
    $("#mytable img").tooltip({

        // each trashcan image works as a trigger
        tip: '#tooltip',

        // custom positioning
        position: 'center right',

        // move tooltip a little bit to the right
        offset: [0, 15],

        // there is no delay when the mouse is moved away from the trigger
        delay: 0
    });
    
        $("#mytable img").click(function() {

        // get handle to the current image (trashcan)
        var img = $(this);

        // gradually hide the parent row
        img.parents("tr").fadeOut(function()  {

            // after the row is deleted, hide our tooltip using the tooltip API
            img.data("tooltip").hide();

        });

    });
    });
        </script>
    </body>
</html>
